\<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Language" content="en" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Add Widgets - PortalSite</title>
		<script type="text/javascript" src="inc/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="inc/interface/interface.js"></script>
		<style type="text/css" media="all">
body {	
	margin: 20px;
	font-family: calibri, sans-serif;
}
.myTree,
.myTree ul
{
	list-style: none;
	padding-left: 22px;
}
.expandImage
{
	margin-right: 4px;
}
.folderImage
{
}
.textHolder
{
	height: 16px;
	line-height: 16px;
	padding-left: 6px;
}
span.dropOver
{
	background-color: #f57900;
	color: #fff;
	height: 16px;
	line-height: 16px;
	padding-left: 6px;
	padding-rigth: 6px;
}
.treeItem
{
	list-style: none;
}

		</style>
	</head>
	<body>
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>
<script type="text/javascript">
function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
  ni.appendChild(newdiv);
}

function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}
</script>
	<p><i>** Choose a widget below te add to your page. **</i></p>
	<ul class="myTree">
		<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Editors</span>
			<ul>
				<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Sticky Note</span></li>
				<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Subfolder 1 2</span>
					<ul style="display: none;">
						<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 1</span></li>
						<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 2</span></li>
						<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 3</span></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Folder 2</span>

			<ul>
				<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Subfolder 2 1</span></li>
				<li class="treeItem"><img src="img/map.png" class="folderImage" /><span class="textHolder">Subfolder 2 2</span></li>
			</ul>
		</li>
	</ul>

	<script type="text/javascript">
$(document).ready(
	function()
	{
		tree = $('#myTree');
		$('li', tree.get(0)).each(
			function()
			{
				subbranch = $('ul', this);
				if (subbranch.size() > 0) {
					if (subbranch.eq(0).css('display') == 'none') {
						$(this).prepend('<img src="img/plusje.png" width="16" height="16" class="expandImage" />');
					} else {
						$(this).prepend('<img src="img/minnetje.png" width="16" height="16" class="expandImage" />');
					}
				} else {
					$(this).prepend('<img src="img/spacer.gif" width="16" height="16" class="expandImage" />');
				}
			}
		);
		$('img.expandImage', tree.get(0)).click(
			function()
			{
				if (this.src.indexOf('spacer') == -1) {
					subbranch = $('ul', this.parentNode).eq(0);
					if (subbranch.css('display') == 'none') {
						subbranch.show();
						this.src = 'img/plusje.png';
					} else {
						subbranch.hide();
						this.src = 'img/minnetje.png';
					}
				}
			}
		);
		$('span.textHolder').Droppable(
			{
				accept			: 'treeItem',
				hoverclass		: 'dropOver',
				activeclass		: 'fakeClass',
				tollerance		: 'pointer',
				onhover			: function(dragged)
				{
					if (!this.expanded) {
						subbranches = $('ul', this.parentNode);
						if (subbranches.size() > 0) {
							subbranch = subbranches.eq(0);
							this.expanded = true;
							if (subbranch.css('display') == 'none') {
								var targetBranch = subbranch.get(0);
								this.expanderTime = window.setTimeout(
									function()
									{
										$(targetBranch).show();
										$('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'img/minnetje.png');
										$.recallDroppables();
									},
									500
								);
							}
						}
					}
				},
				onout			: function()
				{
					if (this.expanderTime){
						window.clearTimeout(this.expanderTime);
						this.expanded = false;
					}
				},
				ondrop			: function(dropped)
				{
					if(this.parentNode == dropped)
						return;
					if (this.expanderTime){
						window.clearTimeout(this.expanderTime);
						this.expanded = false;
					}
					subbranch = $('ul', this.parentNode);
					if (subbranch.size() == 0) {
						$(this).after('<ul></ul>');
						subbranch = $('ul', this.parentNode);
					}
					oldParent = dropped.parentNode;
					subbranch.eq(0).append(dropped);
					oldBranches = $('li', oldParent);
					if (oldBranches.size() == 0) {
						$('img.expandImage', oldParent.parentNode).src('img/spacer.gif');
						$(oldParent).remove();
					}
					expander = $('img.expandImage', this.parentNode);
					if (expander.get(0).src.indexOf('spacer') > -1)
						expander.get(0).src = 'img/minnetje.png';
				}
			}
		);
		$('li.treeItem').Draggable(
			{
				revert		: true,
				autoSize		: true,
				ghosting			: true/*,
				onStop		: function()
				{
					$('span.textHolder').each(
						function()
						{
							this.expanded = false;
						}
					);
				}*/
			}
		);
	}
);
	</script>
	</body>
</html>
